<template>
    <view class="login">
        <view class="contain">
            <view class="inputBox"
                >账号:
                <input type="text" maxlength="11" v-model="phone" />
            </view>
            <view class="inputBox"
                >密码:
                <input type="password" v-model="password" />
            </view>
        </view>

        <view class="comBtn" @tap="onLogin">登录</view>
    </view>
</template>
<script>
import Taro from "@tarojs/taro";

export default {
    data() {
        return {
            phone: '',
            password: '',
            userInfo: null,
        }
    },
    methods: {
        onLogin() {
            console.log(this.phone, this.password)
            let self = this;
            Taro.request({
                url: 'http://159.75.72.220:10001/login', //仅为示例，并非真实的接口地址
                method: 'POST',
                data: {
                    phone: self.phone,
                    password: self.password
                },
                header: {
                    'content-type': 'application/json' // 默认值
                },
                success: function (res) {
                    self.userInfo = res.data.data;
                    Taro.setStorage({
                        key: "userInfo",
                        data: self.userInfo
                    })
                    if (res.data.code == '0000') {
                        Taro.navigateTo({
                            url: '/pages/index/index'
                        })
                    }
                }
            })
        }
    }
}
</script>
<style lang="less">
page{
    background: url(../../asset/bg.jpg);
    background-size: 100% 100%;
}
.login {
    padding: 300px 20px 0 20px;
}
.contain {
    width: 70vw;
    padding: 20px;
    background: rgb(161, 161, 161);
    border-radius: 15px;
    margin: auto;
    overflow: hidden;
}
.inputBox {
    display: flex;
    padding: 20px;
    input {
        padding-left: 10px;
    }
}
.comBtn {
    margin: 20px auto;
    width: 200px;
    height: 80px;
    color: #fff;
    background: #59b8a3;
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>